<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_函数式组件</title>
    <link rel="shortcut icon" href="../../favicon.ico">
</head>
<body>
<div id="test"></div>

<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1、创建组件
    class Weather extends React.Component {
        // 构造器调用几次？--1次
        constructor(props) {
            console.log('constructor')
            super(props);
            this.state = {isHot: false, wind: '大风'};
            // 解决changeWeather中的this指向问题
            this.changeWeather = this.changeWeather.bind(this);
        }

        // render调用几次？--1+n次，1是初始化的那次，n是状态更新的次数。
        render() {
            console.log('render')
            // 读取状态
            const {isHot, wind} = this.state;
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},今天有{wind}</h1>;
        }

        changeWeather() {
            // changeWeather放在哪里？--Weather的原型对象上，供实例使用
            // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接使用的。
            // 类中的方法默认开启了局部的严格模式，所有changeWeather中的this为undefined
            // 严重注意：状态不可直接更改，要借助一个内置的API去更改！！！
            // this.state.isHot = !this.state.isHot // 错误写法
            // 严重注意：状态必须通过setState进行更新，且更新是一种合并，不是替换。
            this.setState({isHot: !this.state.isHot}, () => {
            });

        }
    }


    // 2、渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'));
</script>
</body>
</html>